<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '订单广场',
  },
}
</route>

<template>
  <view class="bg">
    <view class="text-center mt-4 title">订单广场</view>
    <view class="px-6 flex flex-items-center justify-between mb-6">
      <view class="tab-item tab-item-active">全部订单</view>
      <view class="tab-item">我发布的</view>
      <view class="tab-item">我的接单</view>
      <view class="tab-item">我完成的</view>
    </view>
    <view class="orders flex flex-col px-4">
      <order-item
        v-for="(item, index) in orderList"
        :key="index"
        :order="item"
        @click="goView"
        :style="{animation: `slideIn ${(index + 1) * 0.1}s`}"
      ></order-item>
    </view>
  </view>
  <tabbar></tabbar>
</template>

<script setup>
const orderList = ref([
  {
    avatar: new URL('@/static/app/custom-icon/avatar1.png', import.meta.url).href,
    name: '快递代取',
    time: '3分钟前',
    status: '待接单',
    timeLeft: '距离结束：01：57：00',
    type: '小件',
    number: '1个',
    timeExpect: '期望送达：15：25之前',
    remark: '不限性别',
    startAddress: '快递点：菜鸟驿站',
    endAddress: '宿舍楼-学生宿舍楼43栋-608',
    isShow: false,
    money: '金额2元',
  },
  {
    avatar: new URL('@/static/app/custom-icon/avatar1.png', import.meta.url).href,
    name: '快递代取',
    time: '3分钟前',
    status: '待接单',
    timeLeft: '距离结束：01：57：00',
    type: '小件',
    number: '1个',
    timeExpect: '期望送达：15：25之前',
    remark: '不限性别',
    startAddress: '快递点：菜鸟驿站',
    endAddress: '宿舍楼-学生宿舍楼43栋-608',
    isShow: false,
    money: '金额2元',
  },
  {
    avatar: new URL('@/static/app/custom-icon/avatar1.png', import.meta.url).href,
    name: '快递代取',
    time: '3分钟前',
    status: '待接单',
    timeLeft: '距离结束：01：57：00',
    type: '小件',
    number: '1个',
    timeExpect: '期望送达：15：25之前',
    remark: '不限性别',
    startAddress: '快递点：菜鸟驿站',
    endAddress: '宿舍楼-学生宿舍楼43栋-608',
    isShow: false,
    money: '金额2元',
  },
])
function goView() {
  uni.navigateTo({ url: '/pages/order/order-detail' })
}
</script>

<style scoped lang="scss">
.bg {
  height: 100vh;
  overflow: hidden;
  color: rgba(16, 16, 16, 1);
  background: linear-gradient(
    86.39deg,
    rgba(159, 220, 250, 0.6) 4.39%,
    rgba(159, 219, 250, 0.61) 44.88%,
    rgba(170, 198, 254, 0.45) 127.07%
  );
  .title {
    font-family: PingFangSC-bold;
    font-size: 1.13rem;
    line-height: 1.56rem;
    color: rgba(16, 16, 16, 1);
    text-align: bold;
  }
  .tab-item {
    font-family: PingFangSC-regular;
    font-size: 1rem;
    line-height: 1.44rem;
    color: rgba(89, 80, 80, 1);
  }
  .tab-item-active {
    position: relative;
    font-family: PingFangSC-regular;
    font-size: 1rem;
    line-height: 1.44rem;
    color: rgba(16, 16, 16, 1);
    &::after {
      position: absolute;
      bottom: -0.4rem;
      left: 0.87rem;
      width: 2.25rem;
      height: 0.31rem;
      content: '';
      background: linear-gradient(
        89.94deg,
        rgba(117, 214, 244, 1) 47.99%,
        rgba(92, 152, 254, 1) 100.25%
      );
      border-radius: 0.25rem;
    }
  }
  .orders {
  }
}
</style>
